<template>
  <el-card>


    <!-- 新增|刷新 -->
    <ListHeader @create="handleCreate" @refresh="getData" />

    <el-tree :data="tableData" :props="{ label: 'name', children: 'child' }" v-loading="loading" node-key="id"
      :default-expanded-keys="defaultExpandedKeys">

      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <el-tag size="small" :type="data.is_menu ? '' : 'info'">{{
            data.is_menu ? "菜單" : "權限"
          }}</el-tag>
          <el-icon v-if="data.icon" :size="16" class="ml-2">
            <component :is="data.icon"></component>
          </el-icon>
          <span> {{ data.name }}</span>

          <div class="ml-auto">
            <el-switch @click.stop v-model="data.status" :active-value="1" :inactive-value="0"
              @change="handleStatusChange($event, data)" />

            <el-button text type="primary" size="small" class="ml-10" @click.stop="handleEdit(data)">
              修改
            </el-button>
            <el-button text type="primary" size="small" @click.stop="addChild(data.id)">增加</el-button>
            <el-popconfirm confirm-button-text="確定" cancel-button-text="取消" @confirm="handleDelete(data.id)"
              title="確定要刪除嗎?">
              <template #reference>
                <el-button text type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
    </el-tree>



    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
        <el-form-item label="上級菜單" prop="pid">
          <el-cascader v-model="form.pid" :options="options"
            :props="{ value: 'id', label: 'name', children: 'child', checkStrictly: true, emitPath: false }" placeholder="請選擇上級菜單"
            clearable />
        </el-form-item>

        <el-form-item label="菜單/規則">
          <el-radio-group v-model="form.is_menu">
            <el-radio :label="1" border>菜單</el-radio>
            <el-radio :label="0" border>規則</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name" style="width: 30%;"></el-input>
        </el-form-item>
        <el-form-item label="路由" v-if="form.is_menu == 1 && form.pid > 0">
          <el-input v-model="form.path" style="width: 30%;"></el-input>
        </el-form-item>
        <el-form-item label="後端規則" prop="path" v-if="form.is_menu == 0">
          <el-input v-model="form.path" style="width: 30%;"></el-input>
        </el-form-item>
        <el-form-item label="菜單圖標">
          <IconSelect v-model="form.icon"></IconSelect>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" />
        </el-form-item>
      </el-form>
    </FormDrawer>
  </el-card>
</template>
 
<script setup>
import { ref } from "vue"
import ListHeader from "@/components/ListHeader.vue";
import FormDrawer from "@/components/FormDrawer.vue";
import IconSelect from "@/components/IconSelect.vue"
import { useInitTable, useInitForm } from '@/composables/useCommon.js'

import {
  getrule,
  del,
  update,
  create
} from "@/api/access.js"
const defaultExpandedKeys = ref([]);
const options = ref([])
const {
  tableData,
  loading,
  getData,
  handleDelete
} = useInitTable({
  searchForm: {
    keyword: ""
  },
  getList: getrule,
  onGetListSuccess: (res) => {

    tableData.value = res.list
    options.value = res.rules
    defaultExpandedKeys.value = res.list.map((o) => o.id);
  },
  delete: del,

})

const {
  formDrawerRef,
  formRef,
  form,
  rules,
  drawerTitle,
  handleSubmit,
  handleCreate,
  handleEdit
} = useInitForm({
  form: {
    name: "",
    path: "",
    is_menu: 1,
    pid: 0,
    icon: "",
    sort: 1,
    status: 1
  },
  getData,
  update: update,
  create: create
})
const addChild = (id) => {
  handleCreate();
  form.pid = id;
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node__content {
  padding: 20px 0;
}
</style>
 